<template>
  <div class="modal-mask" v-if="modelValue">
    <div class="modal">
      <div class="close" @click="$emit('update:modelValue', false)">X</div>
      <div class="form">
        <input v-model.number="num" type="text" placeholder="请输入数值" />
        <div class="actions">
          <button @click="reset">取消</button>
          <button @click="submit">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["modelValue"],
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    reset() {
      this.num = 1;
      this.$emit("update:modelValue", false);
    },
    submit() {
      if (!this.num) {
        return alert("请输入一个数值");
      }
      this.$emit("sendNum", this.num);
      // 关闭对话框
      this.$emit("update:modelValue", false);
      this.num = 1;
    },
  },
};
</script>

<style>
.modal-mask {
  margin: 0;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.modal {
  position: absolute;
  width: 400px;
  height: 300px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}
.form {
  margin-top: 50px;
  padding: 10px;
  text-align: center;
}
.form input {
  width: 80%;
  margin: 20px auto;
}
.actions {
  display: flex;
  justify-content: space-around;
}
</style>